<!-- 项目详情弹窗组件 -->
<template>
  <el-drawer
    :close-on-click-modal="false"
    class="drawer"
    title="项目详情"
    width="850px"
    size="850"
    :visible.sync="dialogVisible"
    @close="closedFn"
  >
    <div v-loading="loading" class="ui-pl20 ui-pr20">
      <!-- <div class="ui-title"> 项目信息 </div>
      <table width="100%" cellspacing="0" cellpadding="0" class="ui-table">
        <thead>
          <tr>
            <th style="text-align: center"> 项目名称 </th>
            <th style="text-align: center"> 项目编号 </th>
          </tr>
        </thead>
        <tbody align="center">
          <tr>
            <td>{{ projectData.projectName }}</td>
            <td>{{ projectData.projectCode }}</td>
          </tr>
        </tbody>
      </table> -->
      <div class="ui-title ui-mt10">基本信息</div>
      <table width="100%" cellspacing="0" cellpadding="0" class="ui-table">
        <colgroup>
          <col width="120" />
          <col width="280" />
          <col width="120" />
          <col width="280" />
        </colgroup>
        <tbody>
          <tr>
            <th>项目名称</th>
            <td>{{ projectData.projectName }}</td>
            <th>项目编号</th>
            <td>{{ projectData.projectCode }}</td>
          </tr>
          <tr>
            <th>项目来源</th>
            <td>{{ projectData.sourceSystemName }}</td>
            <th>项目进场时间</th>
            <td>{{ projectData.createTime | formatDate("yyyy-MM-dd HH:mm") }}</td>
          </tr>
          <tr>
            <th>行业类型</th>
            <td>{{ projectData.industryType | formatOptionFn(taskObj.industryTypeAndIndustry) }}</td>
            <th>行业类别</th>
            <td>{{ projectData.industry | formatOptionFn(taskObj.industryTypeAndIndustry) }}</td>
          </tr>
          <tr>
            <th>交易方式</th>
            <!-- | formatOptionFn(taskObj.industryTypeAndTenderMode) -->
            <td>{{ tenderModeFn(projectData.tenderMode) }}</td>
            <th>资审方式</th>
            <td>{{ projectData.qualificationExamMethod | formatOptionFn(taskObj.qualificationExamMethods) }}</td>
          </tr>
          <tr>
            <th>是否电子标</th>
            <td colspan="3">{{ projectData.electronFlag | formatFlagFn }}</td>
            <!-- <th>是否隔夜标</th>
            <td>{{ projectData.overNightFlag | formatFlagFn }}</td> -->
          </tr>
        </tbody>
      </table>
      <table width="100%" cellspacing="0" cellpadding="0" class="ui-mt20 ui-table">
        <colgroup>
          <col width="120" />
          <col width="280" />
          <col width="120" />
          <col width="280" />
        </colgroup>
        <tbody>
          <!-- <tr>
            <th>是否远程开标</th>
            <td>{{ projectData.remoteOpenFlag | formatFlagFn }}</td>
            <th>是否远程评标</th>
            <td>{{ projectData.remoteEvaluationFlag | formatFlagFn }}</td>
          </tr> -->
          <tr>
            <th>监管部门</th>
            <td colspan="3">
              {{ projectData.regulateUnit }}
            </td>
          </tr>
          <tr>
            <th>招标单位</th>
            <td colspan="3">
              {{ projectData.tendererName }}
            </td>
          </tr>
          <tr>
            <th>招标单位联系人</th>
            <td>{{ projectData.tendererUserName }}</td>
            <th>联系电话</th>
            <td>{{ projectData.tendererContact }}</td>
          </tr>
          <tr>
            <th>代理机构</th>
            <td colspan="3">
              {{ projectData.tenderAgencyName }}
            </td>
          </tr>
          <tr>
            <th>代理机构联系人</th>
            <td>{{ projectData.tenderAgencyUserName }}</td>
            <th>联系电话</th>
            <td>{{ projectData.tenderAgencyContact }}</td>
          </tr>
          <tr>
            <th>业务部门</th>
            <td colspan="3">
              {{ projectData.businessUnit }}
            </td>
          </tr>
          <tr>
            <th>经办人</th>
            <td>{{ projectData.operateUserName }}</td>
            <th>联系电话</th>
            <td>{{ projectData.operateUserContact }}</td>
          </tr>
          <!-- 以下内容分组动态展示，同一个template中表示为同一组，同一组中只要有一个属性有值，同组的都显示；否则都不显示 -->
          <template v-if="projectData.remoteOriginator || projectData.remoteUserName || projectData.remoteContact">
            <tr>
              <th>远程评标发起方</th>
              <td colspan="3">
                {{ projectData.remoteOriginator }}
              </td>
            </tr>
            <tr>
              <th>远程评标联系人</th>
              <td>{{ projectData.remoteUserName }}</td>
              <th>联系电话</th>
              <td>{{ projectData.remoteContact }}</td>
            </tr>
          </template>
          <!-- 资格预审 移到标段上 by link 202200617  -->
          <!-- <template
            v-if="
            PRE_QUALIFICATION
              projectData.preBidOpenStartTime ||
              projectData.preBidOpenEndTime ||
              projectData.preBidOpenAddress ||
              projectData.preEvaluationStartTime ||
              projectData.preEvaluationEndTime ||
              projectData.preEvaluationAddress
            "
          >
            <tr>
              <th>资格预审开标时间</th>
              <td>
                {{ projectData.preBidOpenStartTime | formatDate("yyyy-MM-dd HH:mm") }}
                <template v-if="projectData.preBidOpenStartTime || projectData.preBidOpenEndTime"> 至 </template>
                {{ projectData.preBidOpenEndTime | formatDate("yyyy-MM-dd HH:mm") }}
              </td>
              <th>资格预审开标地点</th>
              <td>{{ projectData.preBidOpenAddress }}</td>
            </tr>
            <tr>
              <th>资格预审评标时间</th>
              <td>
                {{ projectData.preEvaluationStartTime | formatDate("yyyy-MM-dd HH:mm") }}
                <template v-if="projectData.preEvaluationStartTime || projectData.preEvaluationEndTime"> 至 </template>
                {{ projectData.preEvaluationEndTime | formatDate("yyyy-MM-dd HH:mm") }}
              </td>
              <th>资格预审评标地点</th>
              <td>{{ projectData.preEvaluationAddress }}</td>
            </tr>
          </template> -->
        </tbody>
      </table>
      <div class="ui-title ui-mt10">标段信息</div>
      <table
        v-for="(item, index) in bidSectionData"
        :key="index"
        width="100%"
        cellspacing="0"
        cellpadding="0"
        class="ui-table ui-mb10"
      >
        <colgroup>
          <col width="120" />
          <col width="280" />
          <col width="120" />
          <col width="280" />
        </colgroup>
        <tbody>
          <tr v-if="index === 0">
            <th>预约模式</th>
            <td colspan="3">
              <!-- ************这里没有字段********** -->
              <!-- 按标段预约 -->
              {{ projectData.witnessForm === "BID" ? "按标段预约" : "按项目预约" }}
            </td>
          </tr>
          <tr>
            <th>标段名称</th>
            <td colspan="3">
              {{ item.bidSectionName }}
            </td>
          </tr>
          <tr>
            <th>标段编号</th>
            <td colspan="3">
              {{ item.bidSectionCode }}
            </td>
          </tr>
          <!-- 资格预审显示 -->
          <template v-if="projectData.tenderMode === 'PRE_QUALIFICATION' && item.preEvaluationStartTime">
            <!-- 资格预审 -->
            <tr>
              <th>预审开标时间</th>
              <td>
                {{ item.preBidOpenStartTime | formatDate("yyyy-MM-dd HH:mm") }}
                <template v-if="item.openStartTime || item.openEndTime">至</template>
                {{ item.preBidOpenEndTime | formatDate("yyyy-MM-dd HH:mm") }}
              </td>
              <th>预审开标地点</th>
              <td>{{ item.preBidOpenAddress }}</td>
            </tr>
            <tr>
              <th>预审评标时间</th>
              <td>
                {{ item.preEvaluationStartTime | formatDate("yyyy-MM-dd HH:mm") }}
                <template v-if="item.openStartTime || item.openEndTime">至</template>
                {{ item.preEvaluationEndTime | formatDate("yyyy-MM-dd HH:mm") }}
              </td>
              <th>预审评标地点</th>
              <td>{{ item.preEvaluationAddress }}</td>
            </tr>
          </template>
          <tr>
            <th>开标时间</th>
            <td>
              {{ item.openStartTime | formatDate("yyyy-MM-dd HH:mm") }}
              <template v-if="item.openStartTime || item.openEndTime">至</template>
              {{ item.openEndTime | formatDate("yyyy-MM-dd HH:mm") }}
            </td>
            <th>开标地点</th>
            <td>{{ item.openAddress }}</td>
          </tr>
          <tr>
            <th>评标时间</th>
            <td>
              {{ item.evaluationStartTime | formatDate("yyyy-MM-dd HH:mm") }}
              <template v-if="item.evaluationStartTime || item.evaluationEndTime">至</template>
              {{ item.evaluationEndTime | formatDate("yyyy-MM-dd HH:mm") }}
            </td>
            <th>评标地点</th>
            <td>{{ item.evaluationAddress }}</td>
          </tr>
          <template v-if="item.witnessFPSubTaskInfoVOS">
            <!-- witnessFPSubTaskInfoVOS:{
batchNumber
reEvaluationStartTime
reEvaluationEndTime
reEvaluationAddress
} -->
            <tr v-for="itemA in item.witnessFPSubTaskInfoVOS" :key="itemA.batchNumber">
              <th>复评{{ itemA.batchNumber }}次时间</th>
              <td>
                {{ itemA.reEvaluationStartTime | formatDate("yyyy-MM-dd HH:mm") }}
                <template v-if="itemA.reEvaluationEndTime || itemA.reEvaluationEndTime">至</template>
                {{ itemA.reEvaluationEndTime | formatDate("yyyy-MM-dd HH:mm") }}
              </td>
              <th>复评{{ itemA.batchNumber }}次地点</th>
              <td>{{ itemA.reEvaluationAddress }}</td>
            </tr>
          </template>
          <tr>
            <th>是否重新招标</th>
            <td>{{ item.tenderAgainFlag === "Y" ? "是" : "否" }}</td>
            <th>是否隔夜标</th>
            <td>{{ item.overNightFlag === "Y" ? "是" : "否" }}</td>
          </tr>
          <tr>
            <th>是否远程开标</th>
            <td>{{ item.remoteOpenFlag === "Y" ? "是" : "否" }}</td>
            <th>是否清标</th>
            <td>{{ item.preClearFlag === "Y" ? "是" : "否" }}</td>
          </tr>
          <!-- 清标时间和清标地点这一行内容动态展示，只要其中一个有值就显示，否则都不显示
          v-if="item.preClearStartTime || item.preClearEndTime || item.preClearAddress" -->
          <template v-if="item.preClearFlag === 'Y'">
            <tr>
              <th>清标时间</th>
              <td>
                {{ item.preClearStartTime | formatDate("yyyy-MM-dd HH:mm") }}
                <template v-if="item.preClearStartTime || item.preClearEndTime">至</template>
                {{ item.preClearEndTime | formatDate("yyyy-MM-dd HH:mm") }}
              </td>
              <th>清标地点</th>
              <td>{{ item.preClearAddress }}</td>
            </tr>
          </template>
          <tr v-if="item.remoteEvaluationFlag === 'N'">
            <th>是否远程评标</th>
            <td colspan="3">{{ item.remoteEvaluationFlag === "Y" ? "是" : "否" }}</td>
          </tr>
          <template v-if="item.remoteEvaluationFlag === 'Y'">
            <tr>
              <th>是否远程评标</th>
              <td>{{ item.remoteEvaluationFlag === "Y" ? "是" : "否" }}</td>
              <th>是否为主场</th>
              <td>{{ item.homeFlag === "Y" ? "是" : "否" }}</td>
            </tr>
            <tr>
              <th>远程评标发起方</th>
              <td colspan="3">{{ item.remoteOriginator }}</td>
            </tr>
            <tr>
              <th>远程评标发起人</th>
              <td>{{ item.remoteUserName }}</td>
              <th>远程异地电话</th>
              <td>{{ item.remoteContact }}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    <!-- </el-dialog> -->
  </el-drawer>
</template>
<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  import { projectDetail } from "../../api/api";
  import { FindArrayFn, isOneH } from "../../utils/utils";
  export default {
    // 引入组件
    components: {},
    filters: {
      // 下拉类型值的通用格式化方法，包括行业类型、行业类别、交易方式、资审方式等
      formatOptionFn(val, arrData) {
        let str = "";
        if (val) {
          const obj = FindArrayFn(arrData, val);
          str = obj.label;
        }
        return str;
      },
      // 是/否类型值的通用格式化方法，包括是否电子标、是否隔夜标、是否远程开标、是否远程评标等
      formatFlagFn(val) {
        let str = "";
        if (val) {
          if (val === "Y") {
            str = "是";
          } else if (val === "N") {
            str = "否";
          }
        }
        return str;
      }
    },
    props: {
      // 弹窗是否可见
      visible: {
        type: Boolean,
        default: false,
        required: true
      },
      // 项目id
      projectId: {
        type: String,
        default: "",
        required: true
      },
      // 后端返回的所有下拉映射值数据
      taskObj: {
        type: Object,
        default: () => ({}),
        required: true
      }
    },
    data() {
      // 这里存放数据
      return {
        projectData: {}, // 项目相关信息
        bidSectionData: [], // 标段列表
        loading: true
      };
    },
    // 监听属性 类似于data概念
    computed: {
      dialogVisible: {
        get() {
          return this.visible;
        },
        set(val) {
          this.$emit("update:visible", val);
        }
      },
      wsData() {
        console.log("this.$websocket.getters.wsData", this.$websocket.getters.wsData);
        // return this.$websocket.getters.wsData;
        return this.$websocketNetty.getters.wsData;
      }
    },
    // 监控data中的数据变化
    watch: {
      projectId(newVal) {
        console.log("newval", newVal);
        if (newVal) {
          this.projectDetailFn(newVal);
        }
      },
      wsData(val) {
        console.log("netty watch wsData", val);
        if (val && val.projectId === this.projectId) {
          this.projectDetailFn(val.projectId);
        }
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    // 方法集合
    methods: {
      tenderModeFn(val) {
        console.log("closeDrawer");
        let obj = {};
        if (this.taskObj.tenderModes) {
          obj = this.taskObj.tenderModes.find((item) => item.value === val) || {};
        }
        console.log("obj", obj);
        return obj.label || val;
      },
      closedFn() {
        console.log("closeDrawer");
        this.$emit("closeDrawer");
      },
      async projectDetailFn(projectId) {
        try {
          this.loading = true;
          this.projectData = {};
          this.bidSectionData = [];
          if (!projectId) {
            return;
          }
          const res = await projectDetail({ projectId });
          this.loading = false;
          if (res.success) {
            const date = new Date();
            this.projectData = res.data.witnessProjectBaseInfo;
            this.bidSectionData = res.data.bidSectionInfoList.map(item => {
              if(!isOneH(item.evaluationStartTime, date)){
                item.evaluationAddress =  '**';
              }
              return item;
            });
          } else {
            this.$message({
              type: "error",
              message: res.message || "项目详情信息失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.error(error);
          this.loading = false;
          this.$message({
            type: "error",
            message: "项目详情信息失败，请稍后再试",
            single: true
          });
        }
      },
      closeFn() {
        this.$emit("close");
      }
    }
  };
</script>
<style lang="scss" scoped>
  .drawer ::v-deep .el-drawer__header {
    font-size: 14px;
    font-weight: 700;
  }
</style>
